<template>
  <div class="max-w-[600px] mx-auto bg-gray-100 min-h-screen flex flex-col items-center">
    <!-- 顶部标题栏 -->
    <div class="w-full flex items-center py-3.75 mb-7.5">
      <button
          class="flex items-center gap-1.25 bg-transparent border-none p-2 text-base text-gray-800"
          @click="router.back()"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
        <span>返回</span>
      </button>
      <h2 class="flex-1 text-center m-0 text-xl font-semibold">请支付</h2>
    </div>

    <!-- 支付金额 -->
    <div class="text-center my-7.5">
      <div class="text-lg font-medium text-gray-800 mb-1.25">支付金额</div>
      <div class="text-[36px] font-bold">¥{{ amount.toFixed(2) }}</div>
    </div>

    <!-- 支付二维码（仅修改图片和提示文字） -->
    <div class="bg-white p-7.5 rounded-lg shadow-md text-center my-5">
      <img
          src="@/assets/images/wechatpay-qrcode.png"
      alt="微信支付二维码"
      class="w-[250px] h-[250px] mb-5 mx-auto"
      >
      <p class="m-0 text-base text-gray-600">请使用微信扫描二维码完成支付</p>  <!-- 仅修改这里：支付宝 → 微信 -->
    </div>

    <!-- 支付完成按钮（完全一致） -->
    <button
        class="mt-7.5 bg-blue-500 text-white border-none rounded-full px-10 py-3 text-base font-bold"
        @click="handlePaymentComplete"
    >
      已完成支付
    </button>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { markOrderAsPaid } from '@/utils/storage'
import { ref } from "vue"

const route = useRoute()
const router = useRouter()
const amount = ref(parseFloat(route.query.amount || 0))

const handlePaymentComplete = () => {
  markOrderAsPaid(Number(route.query.orderId))
  router.push({
    name: 'orders',
    query: { t: Date.now() }
  })
}
</script>